<template>
  <uni-popup ref="oPopup" type="bottom">
    <view class="popup-inner-box">
      <view class="control-btns">
        <view class="btn cancel" @click="handleCancel">取消</view>
        <view class="btn confirm" @click="handleConfirm">确认</view>
      </view>
      <slot>
        <picker-view :value="[9999]" @change="bindChange" class="picker-view">
          <picker-view-column>
            <view class="item" v-for="(item, index) in lists" :key="index">{{ item }}年</view>
          </picker-view-column>
        </picker-view>
      </slot>
    </view>
  </uni-popup>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const props = defineProps({
  lists: { type: Array, default: [] },
});

const emit = defineEmits([ 'cancel', 'confirm' ]);

let value: any = '';

const bindChange = (e: any) => {
  const val = e.detail.value;
  //  获取索引
  let [ idx1 ] = val;
  console.log(idx1);
  value = props.lists[idx1];
};

const oPopup = ref(null) as any;

//  打开弹窗
const openPopup = () => {
  oPopup.value.open();
  emit('cancel');
};

//  关闭弹窗
const closePopup = () => {
  oPopup.value.close();
};


//  点击取消
const handleCancel = () => {
  console.log('取消');
  closePopup();
}

//  点击确认
const handleConfirm = () => {
  console.log('确认');
  closePopup();
  emit('confirm', value);
}

// 暴露方法
defineExpose({
  openPopup,
  closePopup
});
</script>

<style lang="scss" scoped>
.popup-inner-box {
  width: 100vw;
  height: 40vh;
  background: #fff;
  border-radius: 40rpx 40rpx 0 0;
  overflow: auto;
  z-index: 1000;

  .control-btns {
    display: flex;
    justify-content: space-between;
    height: 80rpx;

    .btn {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 160rpx;
      font-size: 32rpx;

      &.cancel {
        color: #909399;
      }

      &.confirm {
        color: #409eff;
      }
    }
  }

  .picker-view {
    height: 80%;

    .item {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 36rpx;
    }
  }
}
</style>
